<!DOCTYPE html>
<html lang="ru-RU">
<head>
	<meta charset="utf-8">
	<title>Social Likes</title>
	<link id="styles_flat" href="../dist/social-likes_flat.css" rel="stylesheet">
	<link id="styles_classic" href="../dist/social-likes_classic.css" rel="stylesheet" disabled>
	<link id="styles_birman" href="../dist/social-likes_birman.css" rel="stylesheet" disabled>

<script>
(function() {
function updateSkin() {
	function el(id) { return document.getElementById(id); }
	el('styles_flat').disabled = true;
	el('styles_classic').disabled = true;
	el('styles_birman').disabled = true;
	el('styles_' + location.hash.slice(1)).disabled = false;
}
if (location.hash) {
	updateSkin();
}
else {
	location.hash = '#flat';
}
window.onhashchange = updateSkin;
})();
</script>


	<!--[if lt IE 9]>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<![endif]-->
	<!--[if gte IE 9]><!-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<!--<![endif]-->
	<script src="../src/social-likes.js"></script>

<style>
body {
	margin:0;
	padding:20px;
	font-family:Arial;
	}
table {
	border-collapse:collapse;
	}
td {
	padding:0;
	}
.dark-bg {
	margin:0 -20px;
	padding:20px;
	background:#333;
	}
section {
	margin-bottom:10px;
	}
.skin-switcher {
	margin-top:-20px;
	margin-bottom:40px;
	}
.skin-switcher a {
	display:inline-block;
	padding-top:20px;
	outline:0;
	}
:target {
	color:inherit;
	text-decoration:none;
	font-weight:bold;
	cursor:none;
	}
.show-grid .grid {
	border-left:1px solid hsla(0,0%,0%,.2);
	}
</style>

</head>
<body class="skin_classic">

	<div class="skin-switcher">
		Skin:
		<a id="flat" href="#flat">Flat</a>,
		<a id="birman" href="#birman">Birman</a>,
		<a id="classic" href="#classic">Classic</a>.
		<a id="grid" href="#">Toggle grid</a>
	</div>

	<div class="grid">

	<h3>Standard</h3>
	<div class="social-likes" data-url="http://mail.ru/">
		<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
		<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
		<div class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</div>
		<div class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</div>
		<div class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</div>
		<div class="plusone" title="Опубликовать ссылку в Гугл-плюсе">Google+</div>
		<div class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</div>
	</div>

	<h3>Standard (dark background)</h3>
	<div class="dark-bg">
		<div class="social-likes" data-url="http://mail.ru/">
			<div data-service="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
			<div data-service="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
			<div data-service="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</div>
			<div data-service="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</div>
			<div data-service="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</div>
			<div data-service="plusone" title="Опубликовать ссылку в Гугл-плюсе">Google+</div>
			<div data-service="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</div>
		</div>
	</div>

	<h3>Standard (light)</h3>
	<ul class="social-likes social-likes_light" data-url="http://mail.ru/">
		<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
		<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
		<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
		<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
		<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
		<li class="plusone" title="Опубликовать ссылку в Гугл-плюсе">Google+</li>
		<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
	</ul>


<table>
	<tr>
		<td style="vertical-align:top">
			<h3>Vertical</h3>
			<ul class="social-likes social-likes_vertical" data-url="http://sapegin.github.io/social-likes/" data-title="Свой текст">
				<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
				<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
				<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
				<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
				<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
				<li class="plusone" title="Плюсануть в Гугле">Google+</li>
				<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
			</ul>
		</td>
		<td style="padding-left:40px">
			<h3 style="margin-bottom:3px">Vertical (dark background)</h3>
			<div class="dark-bg">
				<ul class="social-likes social-likes_vertical" data-url="http://sapegin.github.io/social-likes/" data-title="Свой текст">
					<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
					<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
					<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
					<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
					<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
					<li class="plusone" title="Плюсануть в Гугле">Google+</li>
					<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
				</ul>
			</div>
		</td>
		<td style="vertical-align:top; 	padding-left:40px">
			<h3>Vertical (light)</h3>
			<ul class="social-likes social-likes_vertical social-likes_light" data-url="http://sapegin.github.io/social-likes/" data-title="Свой текст">
				<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
				<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
				<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
				<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
				<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
				<li class="plusone" title="Плюсануть в Гугле">Google+</li>
				<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
			</ul>
		</td>
	</tr>
</table>

	<h3>Vertical (no counters)</h3>
	<ul class="social-likes social-likes_vertical" data-counters="no">
		<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
		<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
	</ul>

	<h3>Vertical (with zeroes)</h3>
	<ul class="social-likes social-likes_vertical" data-zeroes="yes">
		<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
		<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
	</ul>

	<h3>Single button</h3>
	<section>
		<ul class="social-likes social-likes_single" data-url="http://maill.ru/">
			<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
			<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
			<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
			<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
			<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
			<li class="plusone" title="Плюсануть в Гугле">Google+</li>
			<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
		</ul>
	</section>
	<section style="padding-left:100px">
		<div class="social-likes social-likes_single social-likes_light" data-url="http://mail.ru/">
			<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
			<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
			<div class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</div>
			<div class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</div>
			<div class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</div>
			<div class="plusone" title="Плюсануть в Гугле">Google+</div>
			<div class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</div>
		</div>
	</section>
	<section>
		<ul class="social-likes social-likes_single social-likes_light social-likes_single-light" data-url="http://mail.ru/" data-single-title="Share me">
			<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
			<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
			<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
		</ul>
	</section>

	<h3>Single button (with zeroes)</h3>
	<section>
		<ul class="social-likes social-likes_single" data-url="http://maill_TRUE_UNEXISTING_DOMAIN_NO_SHARES_I_DARE_YOU.ru/" data-zeroes="yes">
			<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
			<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
			<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
			<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
			<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
			<li class="plusone" title="Плюсануть в Гугле">Google+</li>
			<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
		</ul>
	</section>
	<section style="padding-left:100px">
		<div class="social-likes social-likes_single social-likes_light" data-url="http://maill_TRUE_UNEXISTING_DOMAIN_NO_SHARES_I_DARE_YOU.ru/" data-zeroes="yes">
			<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
			<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
			<div class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</div>
			<div class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</div>
			<div class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</div>
			<div class="plusone" title="Плюсануть в Гугле">Google+</div>
			<div class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</div>
		</div>
	</section>
	<section>
		<ul class="social-likes social-likes_single social-likes_light social-likes_single-light" data-url="http://mail.ru/" data-single-title="Share me" data-zeroes="yes">
			<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
			<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
			<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
		</ul>
	</section>

	<h3>Icons only</h3>
	<ul class="social-likes social-likes_notext" data-url="http://maps.mail.ru/">
		<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
		<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
		<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
		<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
		<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
		<li class="plusone" title="Плюсануть в Гугле"></li>
		<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
	</ul>
	</section>

	<h3>Icons only (with zeroes)</h3>
	<ul class="social-likes social-likes_notext" data-url="http://maill_TRUE_UNEXISTING_DOMAIN_NO_SHARES_I_DARE_YOU.ru/" data-zeroes="yes">
		<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
		<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
		<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
		<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
		<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
		<li class="plusone" title="Плюсануть в Гугле"></li>
		<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
	</ul>

	<h3>Icons only (no counters)</h3>
	<ul class="social-likes social-likes_notext" data-url="http://mail.ru/" data-counters="no">
		<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
		<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
		<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
		<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
		<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
		<li class="plusone" title="Плюсануть в Гугле"></li>
		<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
	</ul>

	<h3>Icons only (light)</h3>
	<ul class="social-likes social-likes_notext social-likes_light" data-url="http://maps.mail.ru/">
		<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
		<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
		<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
		<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
		<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
		<li class="plusone" title="Плюсануть в Гугле"></li>
		<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
	</ul>

	<h3>Icons only (light, no counters)</h3>
	<ul class="social-likes social-likes_notext social-likes_light" data-url="http://mail.ru/" data-counters="no">
		<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
		<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
		<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
		<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
		<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
		<li class="plusone" title="Плюсануть в Гугле"></li>
		<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
	</ul>

	<h3>Custom font-size</h3>
	<ul class="social-likes" data-url="http://mail.ru/" style="font-size:30px">
		<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
		<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
		<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
		<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
		<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
		<li class="plusone" title="Опубликовать ссылку в Гугл-плюсе">Google+</li>
		<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
	</ul>

	<h3>Old initialization HTML</h3>
	<ul class="social-likes">
		<li class="facebook"><a href="#" title="Опубликовать ссылку на Фейсбуке">Facebook</a></li>
		<li class="twitter"><a href="#" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</a></li>
	</ul>

	<h3>Reinitialization</h3>
	<div id="social-likes-re">
		<div class="social-likes" data-url="http://mail.ru/">
			<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
			<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
		</div>
	</div>
	<p><a href="#" id="social-likes-reinit">Reinit</a></p>
<script>
var slre = $('#social-likes-re');
var slre_html = slre.html();
$('#social-likes-reinit').click(function() {
	slre.html(slre_html);
	slre.find('.social-likes').socialLikes();
	return false;
});
</script>

	<h3>Manual initialization</h3>
	<div id="social-likes-manual" data-url="http://mail.ru/">
		<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
		<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
		<div class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</div>
	</div>
	<p><a href="#" id="social-likes-update">Change URL</a>, <a href="#" id="social-likes-update-force">Force update</a></p>
<script>
var sl = $('#social-likes-manual');
sl.on('counter.social-likes', function(event, service, number) {
	console.log('Counter', service, number);
});
sl.on('popup_opened.social-likes', function(event, service, win) {
	console.log('Popup opened', service, win);
});
sl.on('popup_closed.social-likes', function(event, service) {
	console.log('Popup closed', service);
	$(event.currentTarget).socialLikes({forceUpdate: true});  // Update counters
});
sl.socialLikes();
$('#social-likes-update').click(function() {
	sl.socialLikes({
		url: 'https://github.com/sapegin/grunt-webfont/',
		title: 'SVG to webfont converter for Grunt',
		data: {
			media: 'http://birdwatcher.ru/i/userpic.jpg'
		}
	});
	return false;
});
$('#social-likes-update-force').click(function() {
	sl.socialLikes({forceUpdate: true});
	return false;
});
</script>

	<h3>Manual initialization with JavaScript options</h3>
	<ul id="social-likes-manual-options">
		<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
	</ul>

<script>
$('#social-likes-manual-options').socialLikes({
	url: 'https://github.com/sapegin/social-likes/',
	title: 'Beautiful “like” buttons with counters for popular social networks',
	counters: true,
	zeroes: false
});
</script>

	<h3>User button &amp; custom count</h3>
<script>
var socialLikesButtons = {
	surfingbird: {
		clickUrl: 'http://surfingbird.ru/share?url={url}',
		//popupUrl: 'http://surfingbird.ru/share?url={url}',
		pupupWidth: 650,
		popupHeight: 500
	}
};
</script>
<style>
.social-likes__button_surfingbird {
	background: #f2f3f5;
	color: #596e7e;
	border-color: #ced5e2;
	}
.social-likes__icon_surfingbird {
	background: url(http://surfingbird.ru/img/share-icon.png) no-repeat 2px 3px;
	}
</style>
	<div class="social-likes">
		<div class="surfingbird" data-counter="666">Surf</li>
	</div>

	</div>

<script>
if ('localStorage' in window) {
	$('body').toggleClass('show-grid', localStorage.getItem('show-grid') === 'true');
	$('#grid').click(function(e) {
		$('body').toggleClass('show-grid');
		localStorage.setItem('show-grid', $('body').hasClass('show-grid'));
		e.preventDefault();
	});
}
</script>
</body>
</html>
